<template>
  <div :class="['top_header_wrap', { no_name: name === '' }]">
    <div class="header_nemu">
      <div class="gobank" @click="goback">返回</div>
      <slot name="menu"></slot>
      <el-dropdown class="bellModel" @command="navAlg">
        <!-- trigger="click" -->
        <span class="el-dropdown-link">
          <el-badge
            :value="wsalgresult.map((e) => e.isunread).length"
            v-if="wsalgresult.map((e) => e.isunread).length"
            class="item"
          >
            <i class="el-icon-bell icon"></i>
          </el-badge>
          <i class="el-icon-bell icon" v-else></i>
        </span>
        <el-dropdown-menu
          slot="dropdown"
          style="width: unset"
          class="header-elmenu"
        >
          <el-dropdown-item
            v-for="(item, index) in wsalgresult"
            :key="index"
            :command="index"
          >
            <!-- <el-button size="mini" @click="changejiji(item, index)">设为已读</el-button> -->
            <!-- {{ item.algorithmName + item.status + "-" + item.fileName }} -->
            <div class="menudiv">
              <span class="widthspan" :title="item.algorithmName">
                算法名称：{{ item.algorithmName }}
              </span>
              <span class="widthspan" :title="item.fileName">
                文件名称：{{ item.fileName }}
              </span>
            </div>
            <div class="menudiv submenu2">
              <div class="submenu2-left">
                <span>状态：{{ item.status }}</span>
                <span>耗时：{{ item.timeConsuming }}</span>
              </div>
              <div class="submenu2-right" @click.stop="delete1(item)">删除</div>
            </div>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown class="dropModel" trigger="click" @command="handleCommand">
        <span class="el-dropdown-link">
          <div class="avatar"></div>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="name">
            <div class="avataradmin"></div>
            用户名
          </el-dropdown-item>
          <el-dropdown-item command="shezhi">
            <i class="el-icon-s-tools avataradminset"></i>
            设置
          </el-dropdown-item>
          <el-dropdown-item command="logout">
            <i class="el-icon-switch-button avataradminset"></i>
            退出登录
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <slot name="rightBottom"></slot>
    <div class="header_center" @click="goHome">{{ name }}</div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { calculateFrequencyResolution } from "@/utils/utils.js";
export default {
  name: "headerTop",
  props: {
    name: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      routeNav: [
        {
          id: "1",
          name: "数据处理",
          linkTo: "analysis",
        },
        {
          id: "2",
          name: "算法处理",
          linkTo: "algorithm",
        },
      ],
      actPath: "",
      frequencyResolution: 0,
    };
  },
  computed: {
    ...mapState({
      currTabItem: (state) => state.currTabItem,
    }),
    wsalgresult() {
      let arr = this.$store.state.wsalgresult.map((item) => {
        return JSON.parse(item);
      });
      return arr;
    },
  },
  watch: {
    $route: {
      // 深度观察监听
      deep: true,
      immediate: true,
      handler: function (val) {
        this.actPath = val?.name;
      },
    },
  },

  methods: {
    delete1(item) {
      this.$confirm("确定删除?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          this.$api.deleteRecord({ taskId: item.taskId }).then((res) => {
            const { code, message } = res;
            if (code === 200) {
              this.$message({
                message: message,
                type: "success",
              });
            } else {
              this.$message({
                message: message,
                type: "error",
              });
            }
          });
        })
        .catch(() => {});
    },
    navAlg(index, el) {
      let item = this.wsalgresult[index];
      item.tabName = this.getTagName(this.wsalgresult[index].functionName);
      const samplingRate = this.$store.state.samplingRate; //采样率（Hz）
      const windowWidth = this.wsalgresult[index].userInputParams.find(
        (item) => item["参数名称"] === "窗口宽度(s)"
      )?.["参数值"];
      this.frequencyResolution = calculateFrequencyResolution(
        samplingRate,
        windowWidth
      );
      // console.log("头部====频率分辨率：", this.frequencyResolution);

      this.$store.commit(
        "SET_NEW_FREQUENCY_RESOLUTION",
        this.frequencyResolution
      );
      this.$store.commit("SETCURRTABITEM", item);
      // 如果不在分析页，则切换到分析页
      if (this.$route.name !== "analysis") {
        this.$router.push("/analysisTool/analysis");
      } else {
        // 如果在分析页
        this.$router.go(0);
        // this.$router.replace({
        //   path: "/analysisTool/analysis",
        //   query: { t: Date.now() },
        // });
      }
    },
    // 获取算法标签上显示的算法名称
    getTagName(functionName) {
      // lofar=LOFAR、demon=DEMON、detection=信号检测、distinguish=信号识别、estimate=参数估计
      let name = "";
      if (functionName == "lofar") {
        name = "LOFAR";
      } else if (functionName == "demon") {
        name = "DEMON";
      } else if (functionName == "detection") {
        name = "信号检测";
      } else if (functionName == "distinguish") {
        name = "信号识别";
      } else if (functionName == "estimate") {
        name = "参数估计";
      }
      return name;
    },
    // changejiji (item, index) {
    //   let arr = JSON.parse(JSON.stringify(this.wsalgresult))
    //   arr[index].isunread = false
    //   this.$store.dispatch("setWsalgresult", arr)
    //   this.$api.updateTaskViewStatus(item.taskId).then((res) => { })
    // },
    goback() {
      this.$router.push({ path: "/" });
    },
    goHome() {
      this.$router.push({ path: "/" });
    },

    goLinkFn(url) {
      this.$router.push({ path: url });
    },
    handleCommand(command) {
      if (command == "shezhi") {
        this.$store.dispatch("setSettingDialogShow", true);
      } else if (command == "logout") {
        localStorage.removeItem("vuex");
        this.$router.push({ path: "/login" });
      } else if (command == "name") {
        this.$store.dispatch("setUserDialogShow", true);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.top_header_wrap {
  width: 100%;
  height: 85px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../assets/top_header_bg.png");
  background-size: 100% 100%;
  position: relative;
  box-sizing: border-box;

  .header_nemu {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 50px 0 80px;

    .gobank {
      color: #02fff4;
      width: 60px;
      height: 30px;
      line-height: 30px;
      font-weight: 400;
      font-size: 16px;
      text-align: center;
      font-family: Source Han Sans CN, Source Han Sans CN;
      background: rgba(2, 255, 244, 0.1);
      border-radius: 3px 3px 3px 3px;
      cursor: pointer;
      position: absolute;
      left: 10px;
      top: 10px;
    }

    .bellModel,
    .dropModel {
      position: absolute;
      right: 10px;
      top: 10px;
      width: 30px;
      height: 30px;
      cursor: pointer;

      .avatar {
        position: absolute;
        right: 10px;
        width: 30px;
        height: 30px;
        cursor: pointer;
        background-image: url("../assets/more.svg");
      }

      .name {
        margin: 0 8px;
        color: #acd5ff;
        font-size: 14px;
      }

      .icon {
        font-size: 16px;
        color: #acd5ff;
      }
    }

    .bellModel {
      right: 80px;
      display: flex;
      justify-content: center;
      align-items: center;

      .icon {
        font-size: 20px;
        color: #02fff4;
      }
    }
  }

  .right_bottom {
    position: absolute;
    width: 100px;
    right: 20px;
    top: 60px;
    color: #02fff4;
    height: 30px;
    line-height: 30px;
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    font-family: Source Han Sans CN, Source Han Sans CN;
    background: rgba(2, 255, 244, 0.1);
    border-radius: 3px 3px 3px 3px;
    cursor: pointer;
  }

  .header_center {
    position: absolute;
    left: 50%;
    top: 36px;
    transform: translate(-50%);
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    font-size: 34px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
  }
}

.no_name {
  height: 50px;
  background-image: none;
  background-color: rgba(2, 255, 244, 0.15);
  border-bottom: 1px solid #2cf9ed;
}
</style>

<style lang="scss" scoped>
.el-dropdown-menu {
  max-height: 500px !important;
  overflow-y: scroll !important;
  width: 150px;
  background: rgba(7, 47, 70, 0.95);
  border-radius: 0px 0px 0px 0px;
  border: 0;
}

.avataradmin {
  width: 25px;
  height: 25px;
  background: url("../assets/user_icon.png") center center no-repeat;
  background-size: 100% 100%;
  margin-right: 10px;
}

.el-dropdown-menu__item {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 17px;
}

.header-elmenu {
  .el-dropdown-menu__item {
    flex-direction: column;
    border-bottom: 1px solid #2cf9ed;

    .menudiv {
      width: 100%;
      display: flex;
      justify-content: space-between;
      position: relative;

      span {
        width: 50%;
      }

      .widthspan {
        width: 50%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .submenu2 {
      flex: 1;
      display: flex;
      .submenu2-left {
        flex: 1;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}

.avataradminset {
  font-size: 28px;
  color: #02fff4;
  margin-right: 8px !important;
  margin-left: -2px !important;
}

.popper__arrow {
  display: none;
}

.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  background: inherit;
  color: #02fff4;
}
</style>
